<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>dom的增删改查</title>
    <script>
        window.onload = function() {
            // 创建一个广州节点，添加到#city下
            myClick("btn01", function() {
                // 创建广州节点<li>广州</li>
                // 创建li元素节点
                /*
                 *document.createElement()
                 *可以用于创建一个元素节点对象
                 *它需要一个标签名作为参数，将会根据标签名创建元素节点对象
                 *并将创建好的元素对象作为返回值返回
                 */
                var li = document.createElement("li");
                // 2.创建广州文本节点
                // 可以用来创建一个文本节点对象
                // 需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
                var gztext = document.createTextNode("广州");

                // 将gzText设置li的子节点
                // appendChlid()
                // --向一个父节点中添加一个新的子节点
                // 用法： 父节点.appendChild(子节点);

                li.appendChild(gztext);
                // 3.将广州添加到#city下
                var city = document.getElementById("city");
                city.appendChild(li);
            });



            // 2.将广州节点插入到#bj前面
            myClick("btn02", function() {
                // 创建一个li元素节点
                var li = document.createElement("li");
                // 创建文本节点
                var gztext = document.createTextNode("广州");
                // 将文本节点添加到元素节点
                li.appendChild(gztext);
                // 获取取id为#bj的元素节点
                var bj = document.getElementById("bj");
                // 获取city
                var city = document.getElementById("city");
                // inserBefore可以在指定子节点下添加新的子节点
                // 语法：
                //      父节点.insertBefore(新节点，旧节点);
                city.insertBefore(li, bj);
            });



            // 3.使用广州节点替换#bj节点
            myClick("btn03", function() {
                var li = document.createElement("li");
                var gzText = document.createTextNode("广州");
                li.appendChild(gzText);
                var bj = document.getElementById("bj");
                var city = document.getElementById("city");
                // replaceChild();
                // 可以使指定子节点替换已有的子节点
                // 语法： replaceChild(新节点，旧节点);
                city.replaceChild(li, bj);
            });

            // 删除#bj节点
            myClick("btn04", function() {
                var bj = document.getElementById("bj");
                // var city = document.getElementById("city");
                // removeChild();
                // 可以删除一个子节点
                // 语法：
                // 父节点.removeChild(子节点);
                // city.removeChild(bj);
                // 如果不知道父节点可以使用（常用） bj.parentElement.removeChild(子节点);
                bj.parentElement.removeChild(bj);
                //parentElement可以获取元素的父节点
            });
            // 读取#city中的HTML代码
            myClick("btn05", function() {
                var city = document.getElementById("city");
                alert(city.innerHTML);
            });

            // 设置#bj中html代码
            myClick("btn06", function() {
                var bj = document.getElementById("bj");
                bj.innerText = "釜山";
            });

            myClick("btn07", function() {
                // 向city中添加一个广州
                // 使用innerHTML也可以进行DOM的增加，但是不建议这样使用，
                // 一般都是与创建节点的方式结合使用
                var city = document.getElementById("city");
                // city.innerHTML += "<li>广州</li>";
                var li = document.createElement("li");
                li.innerHTML = "广州";
                city.appendChild(li);

            });



        }

        function myClick(isSter, fun) {
            var btn = document.getElementById(isSter);
            btn.onclick = fun;
        }
    </script>
</head>

<body>
    <div id="total">
        <div class="inner">
            <p>
                你喜欢哪个城市？
            </p>
            <ul id="city">
                <li id="bj">北京</li>
                <li>上海</li>
                <li>东京</li>
                <li>首尔</li>
            </ul>
        </div>
    </div>


    <div id="btnList">
        <div><button id="btn01">创建一个广州节点，添加到#city下</button></div>
        <div><button id="btn02">将广州节点插入到#bj前面</button></div>
        <div> <button id="btn03">使用广州节点替换#bj节点</button></div>
        <div> <button id="btn04">删除#bj节点</button></div>
        <div><button id="btn05">读取#city中的HTML代码</button></div>
        <div><button id="btn06">设置#bj中html代码</button></div>
        <div><button id="btn07">创建一个广州节点，添加到#city下</button></div>
    </div>


</body>
<style>
    #btnList {
        height: 300px;
        widows: 300px;
        text-align: center;
    }
    
    #btnList div {
        padding: 10px;
    }
</style>

</html>